<template>
  <div class="flex-row-center">

    <el-icon v-for="(i,index) in fillStarNum" :style="{fontSize:size+2+'px',color:'var(--theme-color)'}" :key="index"><StarFilled /></el-icon>
    <el-icon  v-for="(i,index) in 5-fillStarNum" :style="{fontSize:size+'px'}" :key="index"><Star /></el-icon>
    <div class="margin-row-10" :style="{fontSize:size+2+'px',color:'var(--theme-color)'}">{{score}}分</div>
  </div>
</template>

<script setup lang="ts">
import {defineProps, computed} from "vue";
import {Star, StarFilled} from "@element-plus/icons";

  let props = defineProps<{
    score:number
    size?:number
  }>();
  let fillStarNum=computed(()=>{
     return Math.floor(props.score/100*5)
  })

</script>

<style scoped lang="less">

</style>